

<template>
  <div class="app-container" >
    <div v-if="buttonName==='厂家分布'" class="paneC">
      <el-checkbox-group v-model="csList">
    <el-checkbox label="机泵" />
    <el-checkbox label="消防栓" />
    <el-checkbox label="阀门" />
    <el-checkbox label="仪表" />
    <el-checkbox label="钩子" />
    <el-checkbox label="插销" />
  </el-checkbox-group>
    
    </div>
  
    
    <div id="container">
   

      
    </div>
   
    <div id="pane" >
    
      <p class="pane_title">项目分布 </p>
      <p class="pane_title"> {{ userRemark }}</p>
      <el-input v-model="projectName" placeholder="请输入项目名称" clearable />
      
      <div class="pane_table">
        <el-table  :data="roomData" border style="width: 100%" @row-click="rowClick">
    <el-table-column prop="city" label="城市" />
    <el-table-column prop="area" label="地区"  />
    <el-table-column prop="community" label="公司" />
    <el-table-column prop="building" label="详细地址" />
  </el-table>
      </div>
    </div>
  

    <div class="top_button">
       <div  class="button_s" @click="getDataS('项目分布')">
        <div class="icon"><el-icon :size="15" >
      <Edit />
    </el-icon></div>
        <span>项目分布</span>
       </div>

       <div class="button_s" @click="getDataS('厂家分布')">
        <div class="icon"><el-icon :size="15"><ChatDotRound /></el-icon></div>
        <span>厂家分布</span>
       </div>

    </div>

    <div class="top_button2" >
       <div class="button_s" @click="getDataS('人员分布')">
        <div class="icon"><el-icon :size="15"><User /></el-icon></div>
        <span>人员分布</span>
       </div>

       <div class="button_s" @click="getDataS('在岗人员')">
        <div class="icon"><el-icon :size="15"><MessageBox /></el-icon></div>
        <span>在岗人员</span>
       </div>

       <div class="button_s" @click="getDataS('休假人员')">
        <div class="icon"><el-icon :size="15"><EditPen /></el-icon></div>
        <span>休假人员</span>
       </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader';
import { ref, onMounted ,watch } from 'vue';
import 'element-plus/dist/index.css'
import {getUser} from '../../https/api/user'
let projectName = ref('')





let map = ref<any>(null);
// 点聚合
let cluster = ref<any>(null);
let infoWindow = ref<any>(null);

let windowHeight = ref(document.documentElement.clientHeight);
let AMap = ref<any>(null);
let init = async () => {
  let res = await AMapLoader.load({
    key: '4056aa1b76794cdb8df1d5ee0000bdb8&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar,AMap.PlaceSearch,AMap.DistrictSearch,AMap.HeatMap,AMap.3DTilesLayer,AMap.IndoorMap,AMap.MoveAnimation,AMap.ElasticMarker,AMap.MarkerCluster,AMap.IndexCluster,AMap.MouseTool,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.EllipseEditor,AMap.GeoJSON,AMap.PolylineEditor,AMap.PolygonEditor,AMap.AutoComplete,AMap.Driving,AMap.Walking,AMap.Riding,AMap.Transfer,AMap.Geocoder,AMap.GraspRoad,AMap.StationSearch,AMap.LineSearch,AMap.ArrivalRange,AMap.CitySearch,AMap.Geolocation,AMap.Weather,AMap.RangingTool', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.IndexCluster', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  });
  AMap.value = res;
  map.value = new res.Map('container', {
    resizeEnable: true,
    zoom: 5,
    pitchEnable: true,
  });

  cluster.value = new res.IndexCluster(map.value, roomData.value, {
  
    renderClusterMarker: _renderClusterMarker,
    clusterIndexSet: {
      country: {
            minZoom:1,
            maxZoom: 7,
        },
      city: {
            minZoom: 7,
            maxZoom: 10,
        },
        
        area: {
            minZoom: 10,
            maxZoom: 15,
        },
        community: {
            minZoom: 15,
            maxZoom: 22,
        },
       
    },
   
  });
};



let getStyle= (context: { clusterData: any; index: any; count: any; marker: any; }) => {
 
  let clusterData = context.clusterData; // 聚合中包含数据
        let index = context.index; // 聚合的条件
        console.log(index['mainKey']);
        let count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合绘制点 Marker 对象
        var color = [
            '8,60,156',
			'66,130,198',
            '107,174,214',
            '78,200,211',
        ];
        var indexs = ['country','city','district','area','community'];
        var i = indexs.indexOf(index['mainKey']);
       
        
        var text = clusterData[0][index['mainKey']];
        console.log(clusterData);
        var size = Math.round(30 + Math.pow(count / roomData.value.length, 1 / 5) * 70);
        if(i <= 2){
          //  var extra = '<span class="showCount">'+ context.count +'套11</span>';
          //   text = '<span class="showName">'+ text +'</span>';
          //   text += extra;
            
            
        } else {
            size = 12 * text.length + 20;
        }
        let style = {
            bgColor: 'rgba(' + color[i] + ',.8)',
            borderColor: 'rgba(' + color[i] + ',1)',
            text: text,
            size: size,
            index: i,
            color: '#ffffff',
            textAlign: 'center',
            boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
        }
        return style;
}




let _renderClusterMarker = (context: any) => {
  console.log(context);
  
  let clusterData = context.clusterData; // 聚合中包含数据
        var index = context.index; // 聚合的条件
        var count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合点标记对象
        var styleObj = getStyle(context);
        // 自定义点标记样式
        var div = document.createElement('div');
        div.className = 'amap-cluster';
        div.style.backgroundColor = styleObj.bgColor;
        div.style.width = styleObj.size + 'px';
        if(styleObj.index <= 2) {
            div.style.height = styleObj.size + 'px';
            // 自定义点击事件
            context.marker.on('click', (e: { lnglat: any; }) => {
                console.log(e)
                let curZoom = map.value.getZoom();
                if(curZoom < 20){
                    curZoom += 2;
                }
                map.value.setZoomAndCenter(curZoom, e.lnglat);
            });
        }
        div.style.border = 'solid 1px ' + styleObj.borderColor;
        div.style.borderRadius = styleObj.size + 'px';
        div.innerHTML = styleObj.text;
        console.log(styleObj.text);
        
        div.style.color = styleObj.color;
        div.style.textAlign = styleObj.textAlign;
        div.style.boxShadow = styleObj.boxShadow;
        context.marker.setContent(div)
        // 自定义聚合点标记显示位置
        context.marker.setAnchor('center');

};





let rowClick = (row: any) => {
  
  getClick(row)
}

let getClick = (item: any) => {
  map.value.setCenter([item.lnglat.KL, item.lnglat.kT]); // 设置地图中心点
  //       var zoom = 20; //zoom范围[11,18]
  map.value.setZoom(20); // 设置地图层级
};

let userName = ref('')
let userRemark = ref('')
let getData = async (data : any) => {
  let res = await  getUser(data)
  console.log(res);
  userName.value =  res.data[0].userName
  userRemark.value = res.data[0].userRemark
}

onMounted(() => {
  roomData.value = data1
  getData({userName:JSON.parse(sessionStorage.getItem('userInfo'))?.user.name}) || '1'
});

let csList = ref([])

let data4:any =  [
{
    lnglat: [114.177087, 22.313861],
     community: '香港22001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '旺角',
    markers: [],
    id: 1,
    city: '香港',
  },
  {
    lnglat: [114.174986, 22.310604],
   
    community: '香港002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 2,
    city: '香港',
  },
  {
    lnglat: [114.170009, 22.310604],
    
    community: '香港003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 3,
    city: '香港',
  },

  {
    lnglat: [114.194512, 22.326271],
    
    community: '香港004设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '九龙城',
    id: 4,
    city: '香港',
  },
  
]

let data3:any =  [
 
  {
    lnglat: [107.93, 34.28],

    community: '陕西2有限责任公22司',
    building: 'xxx路XX街001设备22商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [107.93, 34.286],

    community: '陕西有限责任公22司23',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 6,
    city: '陕西',
  },
  {
    lnglat: [107.95, 34.27],
     community: ' 陕西有限责任公司4',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 7,
    city: '陕西',
  },
  
]


let data1:any = [
  {
    lnglat: [114.177087, 22.313861],
    country:'中国',
    community: '香港22001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '旺角',
    markers: [],
    id: 1,
    city: '香港',
  },
  {
    lnglat: [114.174986, 22.310604],
    country:'中国',
    community: '香港002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 2,
    city: '香港',
  },
  {
    lnglat: [114.170009, 22.310604],
    country:'中国',
    community: '香港003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '油麻地',
    id: 3,
    city: '香港',
  },

  {
    lnglat: [114.194512, 22.326271],
    country:'中国',
    community: '香港004设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: '九龙城',
    id: 4,
    city: '香港',
  },

  {
    lnglat: [108.93, 34.28],
    country:'中国',
    community: '陕西001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [108.93, 34.286],
    country:'中国',
    community: '陕西002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 6,
    city: '陕西',
  },
  {
    lnglat: [108.95, 34.27],
     community: ' 陕西003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 7,
    country:'中国',
    city: '陕西',
  },
  
]

let data2:any =  [
 
  {
    lnglat: [108.93, 34.28],

    community: '陕西001设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 5,
    city: '陕西',
  },
  {
    lnglat: [108.93, 34.286],

    community: '陕西002设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 6,
    city: '陕西',
  },
  {
    lnglat: [108.95, 34.27],
     community: ' 陕西003设备商有限责任公司',
    building: 'xxx路XX街001设备商有限责任公司',
    Bh: '0298908765',
    area: "未央区",
    id: 7,
    city: '陕西',
  },
  
]

let buttonName = ref('')

let getDataS = (name: any)=> {
  buttonName.value = name
  if(name === '项目分布'){
    roomData.value = data1
  }else if(name === '厂家分布'){
    roomData.value = data4
  }else if(name === '人员分布'){
    roomData.value = data3
  }else if(name === '休假人员'){
    roomData.value = data2
  }else if(name === '在岗人员'){
    roomData.value = data4
  }
}




let roomData = ref<[]>([]);


watch(roomData,()=>{

  
  init();
},{deep:true})
</script>


<style lang="less" scoped>
.button_s:hover{
  color: white;
  background: #79bbff;
}
.button_s{
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
padding: 10px 20px;
font-size: 10px;
.icon{
  margin-bottom:5px;
}
}
.top_button{
  display: flex;

  position: absolute;
  top: 20px;
  left: 20px;
  padding: 5px;
  background: white;
  border-radius: 10px;
}

.top_button2{
  display: flex;

  position: absolute;
  top: 20px;
  left: 250px;
  padding: 5px;
  background: white;
  border-radius: 10px;
}
.pane_table{
  margin-top:20px
}
.pane_title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.markerClass {
  background-color: #c0e5dfa5;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .imgimg {
    width: 50px;
    height: 50px;
  }
  .bgimg {
    position: absolute;
    left: 50%;
    width: 50px;
    height: 30px;
    //  background: url("/public/1.png") no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
  }

}
#container {
   position: relative;
  width: 75%;
  height:calc(100vh - 6rem);
}
.amap-marker-label {
  position: absolute;
  z-index: 2;
  border: none;
  background-color: #ffffff;
  white-space: nowrap;
  cursor: default;
  padding: 4px;
  font-size: 14px;
  line-height: 19px;
  color: #097a7a;
}

html {
  font-size: 12px;
}
.amap-copyright {
  box-sizing: content-box;
}
* {
  box-sizing: border-box;
}
.input-textarea {
  color: grey;
  height: 8em;
  overflow: auto;
  border-radius: 0.4rem;

  margin-bottom: 1rem;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  line-height: 1.5;
  font-weight: 300;
  color: #111213;
}

hr {
  margin: 0.5rem 0;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

label {
  display: inline-block;
  margin-bottom: 0.4rem;
}

label,
.btn {
  margin-left: 0;
  font-size: 1rem;
}

button,
input,
select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  text-transform: none;
}

[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}

h4 {
  font-family: inherit;
  line-height: 1.8;
  font-weight: 300;
  color: inherit;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
}

.btn:hover {
  color: #fff;
  background-color: #25a5f7;
  border-color: #25a5f7;
}

.btn:hover {
  text-decoration: none;
}

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  justify-content: flex-end;
}

.input-item:last-child {
  margin-bottom: 0;
}

.input-item > select,
.input-item > input[type='text'],
.input-item > input[type='date'] {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-item > select:not(:last-child),
.input-item > input[type='text']:not(:last-child),
.input-item > input[type='date']:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-item > select:not(:first-child),
.input-item > input[type='text']:not(:first-child),
.input-item > input[type='date']:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-item-prepend {
  margin-right: -1px;
}

.input-item-text,
input[type='text'],
input[type='date'],
select {
  height: calc(2.2rem + 2px);
}

.input-item-text {
  width: 6rem;
  text-align: justify;
  padding: 0.4rem 0.7rem;
  display: inline-block;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;

  border-radius: 0.25rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.amap_lib_placeSearch_list li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.input-item-text input[type='checkbox'],
.input-item-text input[type='radio'] {
  margin-top: 0;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  //bottom: 1rem;
  top: 5rem;
  opacity: 0.85;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  height: 780px;
  overflow: auto;
}

.input-text {
  line-height: 2rem;
  margin-right: 2rem;
  font-size: 18px;
}

.info hr {
  margin-right: 0;
  margin-left: 0;
  border-top-color: grey;
}

.info {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: fixed;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 22rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
}

.code {
  left: 1.5rem;
  right: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  overflow: auto;
  margin-bottom: 0rem;
}

.code .btn {
  top: 1rem;
  position: absolute;
  right: 1rem;
}

.code .result {
  border-radius: 0.5rem;
  padding: 1rem;
  bottom: 1rem;
  position: absolute;
  top: 5.5rem;
  right: 1rem;
  left: 1rem;
  overflow: auto;
}

.code .status {
  color: #80adff;
  display: inline-block;
  font-size: 14px;
}

.code h4 {
  display: inline-block;
  max-width: 20rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

select,
input[type='text'],
input[type='date'] {
  display: inline-block;
  width: 100%;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
    no-repeat right 0.75rem center;
  background-size: 8px 10px;

  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type='text'],
input[type='date'] {
  background: #fff;
  padding: 0.375rem 0.75rem;
}

select:focus,
input[type='text']:focus,
input[type='date']:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
}

.btn:focus {
  outline: 0;
  box-shadow: none;
}

select:focus::-ms-value,
input[type='text']:focus::-ms-value,
input[type='date']:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

/* native toastr */
.native-toast {
  position: fixed;
  background-color: rgba(50, 50, 50, 0.8);
  border-radius: 33px;
  color: white;
  left: 50%;
  text-align: center;
  padding: 6px 12px;
  opacity: 0;
  z-index: 99999;
  transition: transform 0.25s, opacity 0.25s, top 0.25s;
  box-sizing: border-box;
}

.native-toast-bottom {
  bottom: 50px;
  -ms-transform: translateX(-50%) translateY(50px);
  transform: translateX(-50%) translateY(50px);
}

.native-toast-bottom.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.native-toast-bottom.native-toast-edge {
  bottom: 0;
}

.native-toast-top {
  top: 50px;
  -ms-transform: translateX(-50%) translateY(-50px);
  transform: translateX(-50%) translateY(-50px);
}

.native-toast-top.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.native-toast-top.native-toast-edge {
  top: 0;
}

.native-toast-center {
  top: 0;
  -ms-transform: translateX(-50%) translateY(-50px);
  transform: translateX(-50%) translateY(-50px);
}

.native-toast-center.native-toast-shown {
  opacity: 1;
  top: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.native-toast-edge {
  border-radius: 0;
  width: 100%;
  text-align: left;
}

@media screen and (min-width: 40rem) {
  .native-toast:not(.native-toast-edge) {
    max-width: 18rem;
  }
}

/*
  max-width does not seem to work in small screen?
*/

/*@media screen and (max-width: 768px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 400px;
  }
}

@media screen and (max-width: 468px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 300px;
  }
}*/

/* types */

.poi-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.native-toast-error {
  background-color: #d92727;
  color: white;
}

.native-toast-success {
  background-color: #62a465;
  color: white;
}

.native-toast-warning {
  background-color: #fdaf17;
  color: white;
}

.native-toast-info {
  background-color: #5060ba;
  color: white;
}

[class^='native-toast-icon-'] {
  vertical-align: middle;
  margin-right: 8px;
}

[class^='native-toast-icon-'] svg {
  width: 16px;
  height: 16px;
}

.input-card {
  width: 32rem;
  z-index: 170;
  color: #fff;
  background-color: #304156;
  padding-bottom: 15px;
}

.input-card .btn {
  margin-right: 0.8rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
.input-text {
  font-size: 30x;
}
label,
.btn {
  margin-left: 0;
  font-size: 1.6rem;
}
.input-item {
  margin-top: 12px;
}

.input-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  position: fixed;
  top: 5rem;
  opacity: 0.85;
  left: 20rem;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  font-size: 1.5em;
  color: #cfe2f7;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
select,
input[type='text'],
input[type='date'] {
  color: #45b2f7;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  font-size: 1.5em;
  color: #4f5d6f;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-input--suffix .el-input__inner {
  padding-right: 30px;
  width: 280px;
  height: 43px;
}
.el-form-item {
  margin-bottom: 7px;
  margin-top: 7px;
}

.paneC{

  position: absolute;
  left: 64%;
  top: 20px;
  padding: 20px;
  background: white;
  z-index: 999;
  /deep/ .el-checkbox-group{
    display: flex;
    flex-direction: column;
  }
}
.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0px;
}

.content_s{
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px;
}


#pane {
  
  background: white;
  padding: 20px;
  position: relative;
  background-color: white;
  height:calc(100vh - 6rem);
  overflow-y: auto;
  width: 25%;
  // overflow: auto;
  // height: 600px;
}
.amap_lib_placeSearch {
  border-radius: 2px;
  padding: 5px 10px 2px;
}
.amap_lib_placeSearch {
  font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #565656;
  font-size: 12px;
  line-height: 22px;
  word-wrap: break-word;
  background-color: #fff;

  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  min-width: 270px;
}
.amap_lib_placeSearch_list {
  background: #fff none repeat scroll 0 0;
}
.amap_lib_placeSearch ol,
.amap_lib_placeSearch ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.amap_lib_placeSearch .poibox {
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  padding: 10px 5px;
  position: relative;
  min-height: 35px;
}
.amap_lib_placeSearch_pic {
  width: 46px;
  height: 46px;
  float: left;
  margin: 4px 10px 0 0;
}
.amap_lib_placeSearch_pic img {
  width: 46px;
  height: 46px;
}
.amap_lib_placeSearch .poibox .poi-title {
  margin-left: 25px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.amap_lib_placeSearch .poibox .poi-title .poi-name {
  max-width: 160px;
  display: inline-block;
}
.amap_lib_placeSearch .amap-ellipsis {
  max-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amap_lib_placeSearch .poibox .poi-info {
  word-break: break-all;
  margin: 0 0 0 25px;
  overflow: hidden;
}
.amap_lib_placeSearch .poibox .poi-info p {
  color: #999;
  font-family: Tahoma;
  line-height: 20px;
}
.amap_lib_placeSearch .amap-ellipsis {
  max-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.amap_lib_placeSearch p {
  margin: 0;
}
</style>
